<template>
	<view class="index">
		<view class="top-info">
			<image mode="widthFix" src="/static/images/index/banner.png" class="banner"></image>
			<view class="head">
				<image src="/static/images/mine/head.png"></image>
				<view class="tab">党员</view>
			</view>
			<view class="head-btn">点击登录</view>
			<view class="infos flex align between">
				<view class="infos-item">
					<view class="item-tit">姓名</view>
					<view class="item-name">张三</view>
				</view>
				<view class="infos-item">
					<view class="item-tit">所在地</view>
					<view class="item-name">江西修水</view>
				</view>
				<view class="infos-item">
					<view class="item-tit">岗位</view>
					<view class="item-name">岗位名称XXX</view>
				</view>
			</view>
		</view>
		<view class="flex align new-tit" style="font-size: 32rpx;font-weight: bold;">
			<text></text>
			基础功能
		</view>
		<view class="nav-card flex between">
			<image @click="toUrl('/pages/apply/apply')" src="/static/images/index/nav1.png" mode="widthFix" class="nav1"></image>
			<view style="width: 48%;">
				<image @click="toUrl('/pages/suggest/suggest')" src="/static/images/index/nav2.png" mode="widthFix" class="nav2"></image>
				<image @click="toUrl('/pages/news/news')" src="/static/images/index/nav3.png" mode="widthFix" class="nav3"></image>
			</view>
		</view>
	<!-- 	<view class="card flex align between">
			<view class="item" @click="toUrl('/pages/login/login')">
				<image src="/static/images/index/icon1.png" mode="heightFix"></image>
				<view style="color: #118E67;">登入注册</view>
			</view>
			<view class="item" @click="toUrl('/pages/apply/apply')">
				<image src="/static/images/index/icon2.png" mode="heightFix"></image>
				<view style="color: #428AF6;">流动申报</view>
			</view>
			<view class="item" @click="toUrl('/pages/suggest/suggest')">
				<image src="/static/images/index/icon3.png" mode="heightFix"></image>
				<view style="color: #BC2D00;">困难诉求</view>
			</view>
		</view> -->
		<view class="card" style="padding: 0;">
			<view class="new-tit flex align between">
				<view class="flex align tit">
					<text></text>
					工作动态
				</view>
				<view class="more" @click="toUrl('/pages/news/news')">更多</view>
			</view>
			<navigator url="/pages/news/detail" hover-class="none" class="list flex between" v-for="(item,index) in 3"
				:key="index">
				<image src="/static/images/index/img.png" mode="aspectFill"></image>
				<view class="info flex wrap">
					<view class="name">孟州市槐树乡:厚植绿色优势 赋能乡村振兴</view>
					<view class="time flex align between">
						<view>13人阅读</view>
						<view>2022-3-31 17:45</view>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>
<script>
	import {
		minilogin,
		checkToken,
		positionDetail,
		taskLists
	} from '@/api/apiData.js';
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			toUrl(u) {
				uni.navigateTo({
					url: u
				})
			}

		},
		onShow() {

		},
		onReady() {

		},
		onShareAppMessage(res) {

		},
		onPageScroll(e) {

		},
		onReachBottom() {

		},

	}
</script>

<style lang="scss" scoped>
	.top-info {
		margin: 60rpx 24rpx 20rpx;
		position: relative;
		padding-top: 30rpx;

		.banner {
			width: 100%;
			height: 200rpx;
		}

		.head {
			position: absolute;
			top: -40rpx;
			left: 94rpx;
			text-align: center;

			image {
				width: 148rpx;
				height: 148rpx;
			}

			.tab {
				background: #FFB100;
				border-radius: 20rpx;
				width: 120rpx;
				line-height: 36rpx;
				color: white;
				text-align: center;
				font-size: 24rpx;
				margin: 0 auto;
				box-shadow: 1rpx 2rpx 6rpx 0rpx #2d2d2d;
			}
		}
		.head-btn{
			box-shadow: 1rpx 2rpx 6rpx 0rpx #2d2d2d;
			background: #FFB100;
			border-radius: 29rpx;
			width: 192rpx;
			line-height: 57rpx;
			color: white;
			text-align: center;
			font-size: 34rpx;
			position: absolute;
			top: 70rpx;
			right: 58rpx;
		}
		.infos{
			position: absolute;
			left: 10%;
			bottom: 32rpx;
			color: white;
			width: 80%;
			.item-tit{
				color: #FFCFC7;
				font-size: 18rpx;
			}
			.item-name{
				font-size: 28rpx;
				margin-top: 6rpx;
				text-shadow: 1rpx 2rpx 2rpx #565656;
			}
		}
	}


	.title {
		font-size: 48rpx;
		color: white;
		position: absolute;
		width: 100%;
		text-align: center;
		font-weight: bold;
		top: 100rpx;
	}

	.card {
		background: white;
		border-radius: 8rpx;
		box-shadow: 1rpx 1rpx 2rpx 1rpx gainsboro;
		margin: 22rpx 24rpx;
		padding: 26rpx;

		.item {
			font-size: 28rpx;
			text-align: center;
			flex: 1;

			image {
				width: 46rpx;
				height: 43rpx;
				margin-bottom: 10rpx;
			}
		}

	
		.list {
			padding: 20rpx 26rpx;
			border-bottom: solid 1rpx #DEDEDE;

			image {
				width: 194rpx;
				height: 148rpx;
			}

			.info {
				width: 65%;
			}

			.name {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				width: 100%;
			}

			.time {
				color: #999999;
				font-size: 22rpx;
				width: 100%;
			}
		}
	}
	.new-tit {
		font-size: 28rpx;
		padding: 19rpx 24rpx;
	
		text {
			display: block;
			width: 9rpx;
			height: 35rpx;
			background: #FF9008;
			border-radius: 5rpx;
			margin-right: 16rpx;
		}
	
		.more {
			color: #FF9008;
			font-size: 24rpx;
		}
	}
	.nav-card{
		margin: 0 24rpx;
		border-radius: 12rpx;
		padding:30rpx;
		background: linear-gradient(to bottom,#F9A895,#FFFFFF);
		.nav1{
			width: 49%;
			height: 200rpx;
		}
		.nav2{
			width: 100%;
			height: 100rpx;
			margin-bottom: 20rpx;
		}
		.nav3{
			width: 100%;
			height: 100rpx;
		}
	}
	
</style>